<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <c:set var="path" value="${pageContext.request.contextPath}"></c:set>
    <link rel="shortcut icon" href="${path}/images/titleico.ico">
    <link rel="stylesheet" href="${path}/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${path}/layui/css/formSelects-v4.css">
    <script src="${path}/layui/layui.js"></script>
    <script src="${path}/js/jquery.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md5">
            <div style="height: 2px;"></div>
            <br>
            <h1 style="text-align: center">商品列表</h1>
            <hr class="layui-bg-blue">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-form" action="">
                        <!--商品名-->
                        <label class="layui-form-label">商品名称：</label>
                        <div class="layui-input-inline" style="width: 175px;">
                            <input value="" id="mingcheng" name="name" type="text" autocomplete="off" class="layui-input">
                        </div>
                        <!--查询-->
                        <div class="layui-input-inline" style="width: 100px;">
                            <button class="layui-btn layui-btn-normal" onclick="searchData();"><i class="layui-icon layui-icon-search"></i> 查询</button>
                        </div>
                    </div>
                </div>
            </div>
            <table class="layui-table" lay-data="{
                        id:'spTable',
                        url:'${path}/Shopping/list',
                        page:true,
                        toolbar:'#toolbarDemo',
                        defaultToolbar: ['filter', 'print', 'exports'],
                        even: true,
                        loading: true
                    }"
                   lay-filter="spTable">
                <thead>
                <tr>
                    <th lay-data="{field:'id',templet:'#bianhao',style:'background-color: #66BB6A;color: #fff;'}">商品编号</th>
                    <th lay-data="{field:'name'}">商品名称</th>
                    <th lay-data="{field:'price',templet:'#jiage'}">商品价格(元)</th>
                    <th lay-data="{field:'total'}">商品库存</th>
                </tr>
                </thead>
            </table>
        </div>
        <div style="width: 20px;border: 1px solid #fff"></div>
        <div class="layui-col-md7">
            <br>
            <h1 style="text-align: center">已选商品</h1>
            <hr class="layui-bg-blue">
            <!--购买-->
            <div class="layui-input-inline">
                <button onclick="goumai()" style="margin-left: 570px;" class="layui-btn layui-btn-danger"><i class="layui-icon layui-icon-cart"></i>购买</button>
            </div>
            <table class="layui-table"id="prjjie"
                   lay-filter="prjjie"
                   style="margin-top: 19px;margin-left: 5px;">
                <thead>
                <tr>
                    <th style="display: none">id</th>
                    <th>商品名称</th>
                    <th>商品价格(元)</th>
                    <th>商品数量</th>
                    <th>操作员</th>
                    <th>日期</th>
                    <th>操作</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
<script type="text/html" id="jiage">
    {{d.price< 10 ? d.price+'（元）' :  d.price+'（元） '}}
</script>
<script type="text/html" id="bianhao">
    {{d.id< 10 ? 'SPBH'+d.id:'2019'+d.id}}
</script>
<%--<script type="text/html" id="geshu">--%>
    <%--{{d.num< 10 ? d.num+'（个）' :  d.num+'（个） '}}--%>
<%--</script>--%>
<script type="text/html" id="leixing">
    {{d.shoppingType.type}}
</script>

<%--添加/修改-form--%>
<div id="addandup" style="display: none">
    <br>
    <br>
    <div class="layui-form-item">
        <div class="layui-inline">
            <form action="" id="spforms" lay-filter="spforms" name="spforms">
                <div class="layui-form" action="">
                    <div class="layui-inline">
                        <!--商品名-->
                        <input type="hidden" name="id">
                        <label class="layui-form-label">商品名称：</label>
                        <div class="layui-input-inline" style="width: 175px;">
                            <input value="" id="spname" readonly name="shoppingName" type="text" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label">总价格：</label>
                        <div class="layui-input-inline" style="width: 175px;">
                            <input value="" readonly name="shoppingJg" id="spjiage" type="text" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div style="height: 30px;"></div>
                    <div class="layui-inline">
                        <label class="layui-form-label">商品数量：</label>
                        <div class="layui-input-inline" style="width: 175px;">
                            <input value="" readonly id="spshuliang" name="shoppingNum" type="text" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label">操作员：</label>
                        <div class="layui-input-inline" style="width: 175px;">
                            <input value="" readonly name="czyname" id="spkucun" type="text" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div style="height: 30px;"></div>
                    <div class="layui-inline">
                        <label class="layui-form-label">日期：</label>
                        <div class="layui-input-inline" style="width: 175px;">
                            <input value="" readonly name="sxdate" id="spriqi" type="text" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>

    function searchData(){
        layui.table.reload("spTable",{
            page:{
                curr : 1
            },
            where:{
                "name":$("#mingcheng").val(),
                "typeid" : $("#sptype").val()
            }
        });
    }
    //加载表格 表单
    layui.use(["form","table"], function(){
        var table = layui.table;
        table.on('rowDouble(spTable)',function (obj) {
            var data=obj.data;
            var len=$("#prjjie tr").length;
            for (var i=0;i<=len-1;i++){
                if(data.id==$("#prjjie tr:eq("+i+") td:first").text()){
                    var nm=$("#prjjie tr:eq("+i+") td:eq(3)").text();
                    nm=parseInt(nm)+1;
                    $("#prjjie tr:eq("+i+") td:eq(3)").text(nm)
                    return;
                }
            }
            //获取当前日期年月日
            var datas = new Date();
            var shijian  = datas.getFullYear()+"-0";
            shijian+=(datas.getMonth()+1)+"-";
            shijian+=datas.getDate()+" ";
            $("#prjjie").append("<tr><td style='display: none'>"+obj.data.id+"</td><td>"+obj.data.name+"</td><td>"+data.price+"</td><td>1</td><td>"+'${loginout}'+"</td><td>"+shijian+"</td><td onclick='del(this)'><a href='javaScript:voir(0)'>删除</a></td></tr>");
        })
    });
    function del(ts) {
        $(ts).parent().remove();
    }
    function goumai() {
        var lens=$("#prjjie tr").length;
        if(lens == 1){
            layer.msg("<v style='color:red'>" + "你还没有选择商品！" + "</v>", {time: 1200, icon: 5}),function () {
                return false;
            };
        }else{
            layer.confirm("真的要购买吗？",{icon:3,title: "儿童乐园友情提示！"},function (index) {
                var lenss=$("#prjjie tr").length;
                var zhi="";
                for (var i=1;i<=lenss-1;i++){
                    var a=i-1;
                     zhi +=
                        "&shoppingXs["+a+"].shoppingName="+$("#prjjie tr:eq("+i+") td:eq(1)").text()
                        +"&shoppingXs["+a+"].shoppingJg="+$("#prjjie tr:eq("+i+") td:eq(2)").text()
                        +"&shoppingXs["+a+"].shoppingNum="+$("#prjjie tr:eq("+i+") td:eq(3)").text()
                        +"&shoppingXs["+a+"].czyname="+$("#prjjie tr:eq("+i+") td:eq(4)").text()
                        +"&shoppingXs["+a+"].sxdate="+$("#prjjie tr:eq("+i+") td:eq(5)").text();
                }
                $.post("${path}/Shopping/bathadd",zhi,function () {
                    var lensss=$("#prjjie tr").length;
                    var zhis="";
                    for (var i=1;i<lensss;i++){
                        var aa=i-1;
                        var id = $("#prjjie tr:eq("+i+") td:eq(0)").text();
                        var num = $("#prjjie tr:eq("+i+") td:eq(3)").text();
                        //发送异步请求,传递编号和数量
                        $.post("${path}/Shopping/updateTotal",{"id":id,"num":num},function (data) {
                            //商品列表表格刷新
                            layui.table.reload("spTable");
                            //已选商品清空
                            $("#prjjie tr td").parent().remove();
                        })
                    }
                    layer.close(index);
                    layer.msg("购买成功！")
                })
            });
        }
    }
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn layui-btn-disabled" lay-event="add">请双击单元格添加商品</button>
    </div>
</script>
</body>
</html>